<script setup lang="ts">

import NavigationBar from "@/components/navigationBar.vue";

import {getInfo} from "@/api/home/login/login";
import {ElMessage} from "element-plus";
import router from "@/router";
import {getMinePre} from "@/api/home/index";
import MyAppointments from "@/views/booking/myAppointments.vue";
import {ArrowLeftBold} from "@element-plus/icons-vue";

getInfo().then(res => {
    if (res.code == 401) {
        ElMessage.error('登录认证过期，请重新登录！')
        router.push({path: `/login`})
    }
    if (res.code == 200) {
        localStorage.setItem('studentId',res.data.id)
    }
})

function goIndex() {
    localStorage.getItem('data')
    router.push({path: '/index'})
}

getMinePre().then(res => {
    console.log(res)
})
</script>

<template>
  <!--  发起预约页面-->
    <div class="box">
        <div class="tit">
            <div class="titBox" @click="goIndex">
                <el-icon class="svgIcon">
                    <ArrowLeftBold/>
                </el-icon>
                <span class="titText">返回首页</span>
            </div>
        </div>
        <div class="titleText">
<!--            头部文字-->
            心理预约
        </div>
        <div class="backgroundImg">
<!--            头部背景-->
            <img src="../assets/images/心理预约.png" alt="" class="bookingImg">
        </div>
        <div class="itSMine">
<!--            我的预约与发起预约-->
            <my-appointments></my-appointments>
        </div>
        <div class="navigationBar">
            <navigation-bar></navigation-bar>
        </div>
    </div>
</template>

<style scoped>
* {
    margin: 0;
    padding: 0;
}

.tit {
    margin-bottom: 2%;
    padding: 4%;
    border-bottom: 1px solid rgba(42, 43, 65, 0.1);
    background-color: #F5F8FB;

    .titText {
        font-size: 4vw;
    }

    .svgIcon {
        vertical-align: top;
        color: #5e5c5c;
    }
}

.titleText {
    padding: 2%;
}

.backgroundImg {
    width: 100%;
    height: 100%;
    .bookingImg {
        width: 100%;
        height: 100%;
    }
}

.navigationBar {
    position: fixed;
    padding: 3% 0;
    width: 100%;
    min-height: 6%;
    background-color: #fff;
    bottom: 0;
    border: 1px solid rgba(42, 43, 65, 0.2);
}
</style>